<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css"/>
    <style>
        html,body{
            width:100%;
            height:100%;
        }
        body{
            background:#F5F9FF;
            position: relative;
        }
        .banner{
            width:100%;
            height:18.5rem;
            background:url(__IMG__/bg.png) no-repeat center center;
            background-size:100% 100%;
            padding-top:2rem;
        }
        .top{
            width:100%;
            height:1.6rem;
            padding-left:0.75rem;
            padding-right:1rem;
            align-items: center;
        }

        .arrow{
            width:1.6rem;
            height:1.6rem;
        }
        .arrow img{
            width: 100%;
            height:100%;
        }
        .title{
            color:#fff;
            font-size:0.75rem;
        }
        .box{
            width:100%;
            padding:0 1rem;
            background:rgba(0,0,0,0);
            position: absolute;
            top:5.1rem;
            left:0;
            padding-bottom:1.25rem;

        }
        .container{
            background:#fff;
            border-radius:0.25rem;
            box-shadow:0px 2px 10px 5px rgba(192,220,230,0.1);
        }
        .content{
            width:100%;
            padding:1.7rem 0.75rem 0rem;
        }
        .outer{
            height:2.95rem;
            align-items: center;
            border-bottom:1px solid #eee;
        }
        .phone,.pwd{
            width:1.2rem;
            height:1.2rem;
            margin-right:0.5rem;
        }
        .phone img{
            width:100%;
            height:100%;
        }
        .pwd img{
            width:100%;
            height:100%;
        }
        input[type="tel"],input[type="text"],input[type="password"]{
            /*height:1.2rem;*/
            margin:0;
            padding:0;
            font-size:0.7rem;
            color:#333;
            background:#fff;
        }
        input::-webkit-input-placeholder{
            color:#ccc;
        }
        .btn{
            width:100%;
            height:2.2rem;
            line-height: 2.2rem;
            font-size:0.8rem;
            color:#fff;
            text-align: center;
            background:linear-gradient(90deg,rgba(176,224,226,1) 0%,rgba(181,209,227,1) 21%,rgba(155,175,230,1) 42%,rgba(166,148,242,1) 57%,rgba(190,124,255,1) 70%,rgba(214,112,246,1) 83%,rgba(221,118,244,1) 100%);
            box-shadow:0px 2px 15px 0px rgba(240,213,255,1);
            border-radius:22px;
            margin-top:5rem;
            margin-bottom:0.6rem;
        }
        .item-all{
            padding:0 0.75rem;
            display:flex;
            justify-content: space-between;
            font-size:0.7rem;
            color:#999;
        }
        .third{
            height:17px;
            width: 100%;
            align-items: center;
            padding: 0 0.9rem;
            margin-top: 4.7rem;
        }

        .other {
            color: #999;
            font-size: 0.6rem;
            line-height:0.85rem;
            margin-left:1rem;
            margin-right:1rem;
        }
        .underLine11 {
            height: 1px;
            /*margin-top: 70px;*/
            background-image: linear-gradient(left,rgba(232, 232, 232, 0.4),rgba(204, 204, 204, 1));
            background-image: -webkit-linear-gradient(left,rgba(232, 232, 232, 0.4),rgba(204, 204, 204, 1));
        }
        .underLine111 {
            height: 1px;
            /*margin-top: 70px;*/
            background-image: linear-gradient(right,rgba(232, 232, 232, 0.4),rgba(204, 204, 204, 1));
            background-image: -webkit-linear-gradient(right,rgba(232, 232, 232, 0.4),rgba(204, 204, 204, 1));
        }
        .logo-box{
            padding:0 0.8rem;
            height:4.9rem;
            display: flex;
            align-items: center;
        }
        .logo{
            width:25%;
        }
        .logo img{
            width:1.4rem;
            height:1.4rem;
            margin:auto;
        }
        .eye{
            width:1.2rem;
            height:1.2rem;
        }
    </style>
</head>
<body>
<div class="banner">
    <div class="top flex-wrap" style="width: 100%;text-align: center;color: #FFF;font-weight: bold;">
        <!--<div class="arrow"><img src="__IMG__/white_arrow.png" alt="" onclick="closewin();"></div>-->
        <div class="flex-con">账 号 登 录</div>
        <!--<div class="title" onclick="fnRegister()" tapmode>注册</div>-->
    </div>
</div>
<div class="box">
    <div class="container">
        <div class="content">
            <div class="outer flex-wrap">
                <div class="phone"><img src="__IMG__/phone_no.png" alt=""></div>
                <input type="tel" class="flex-con" placeholder="请输入手机号" maxlength="11" id="user_phone" value="{$phone}">
            </div>
            <div class="outer flex-wrap">
                <div class="pwd"><img src="__IMG__/pwd_no.png" alt=""></div>
                <input type="password" class="flex-con" placeholder="请输入密码" maxlength="32" id="user_pwd" value="{$password}">
                <!--<img src="__IMG__/close_eye.png" alt="" class="eye close-eye" onclick="yanjing(this)" tapmode>-->
            </div>
            <div class="btn" onclick="fnLogin()" tapmode>登录</div>
            <!--<div class="item-all">-->
                <!--<div class="left-item" onclick="forget()" tapmode>忘记密码</div>-->
                <!--<div class="right-item" onclick="fast()" tapmode>快捷登录</div>-->
            <!--</div>-->
        </div>

        <!--<div class="third flex-wrap">-->
            <!--<div class="underLine11 flex-con"></div>-->
            <!--<div class="other">第三方登录</div>-->
            <!--<div class="underLine111 flex-con"></div>-->
        <!--</div>-->
        <!--<div class="logo-box">-->
            <!--<div class="logo"><img src="__IMG__/wx.png" alt=""></div>-->
            <!--<div class="logo"><img src="__IMG__/qq.png" alt=""></div>-->
            <!--<div class="logo"><img src="__IMG__/alipay.png" alt=""></div>-->
            <!--<div class="logo"><img src="__IMG__/weibo.png" alt=""></div>-->
        <!--</div>-->
    </div>
</div>

</body>
{include file="public/footer" /}
<script type="text/javascript">
    var user_phone = $('#user_phone').val();//手机号
    if(user_phone != ''){
        $('.btn').trigger('click');
    }
    //登录
    function fnLogin(){
        var user_phone = $('#user_phone').val();//手机号
        var user_pwd = $('#user_pwd').val();//密码
        var regBox = {
            regMobile: /^1[3|4|5|6|7|8|9][0-9]{9}$/ //手机
        };
        var regBox1 = {
            regPwd: /^[\da-zA-Z]{6,32}$/ //密码
        }
        //判断特殊符号
        var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
        var regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
        var rPhone = regBox.regMobile.test(user_phone);
        var rPwd = regBox1.regPwd.test(user_pwd);
        if(!user_phone||!rPhone){
            layer.open({
                content: '请输入正确的手机号'
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return
        }
        if(!user_pwd){
            layer.open({
                content: '密码由6-32位数字/字母/常用符号组成'
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return
        }
//        else if(!rPwd||regEn.test(user_pwd) || regCn.test(user_pwd)){
//            layer.open({
//                content: '密码由6-20位数字/字母/常用符号组成'
//                ,skin: 'msg'
//                ,time: 2 //2秒后自动关闭
//            });
//            return
//        }
        var parame = {
            phone:user_phone,
            password:user_pwd
        };
        $.ajax({
            url: '/index/Login/doLogin',
            data: parame,
            type: 'POST',
            dataType: 'JSON',
            success: function (returnData) {
                if(returnData.code == 200){
                    location.href = '{:url("index/Index/index")}';
                }else{
                    layer.open({
                        content: returnData.msg
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }
            },
            error: function () {
                alert('服务器错误，请刷新重试！');
            }
        })
    }
</script>
</html>
